<template name="uwo-search-bar">
	<view
		class="uwo-search-bar"
		:style="{
			background: bgColor
		}"
	>
		<view
			v-if="orderOptions.length > 0"
			class="uwo-search-bar-item"
			@click="showOrder"
			:style="{
				color: orderValue ? activeColor : '#333'
			}"
		>
			{{ orderText }}
			<uni-icons custom-prefix="uwofont" type="uwo-xia-fill" :color="activeColor" size="14"></uni-icons>
		</view>
		<view class="uwo-search-bar-item" style="flex: 1">
			<uni-search-bar :readonly="popupState" v-model="searchValue" placeholder="请输入关键字" cancelButton="none" bgColor="#EEEEEE" @confirm="search" @clear="search" />
		</view>
		<view
			class="uwo-search-bar-item"
			:style="{
				color: !isBlank(filterValue) ? activeColor : '#333'
			}"
			@click="showFilter"
			v-if="filterOptions.length > 0"
		>
			筛选
			<uni-icons custom-prefix="uwofont" type="uwo-shaixuan" :color="!isBlank(filterValue) ? activeColor : '#333'" size="14"></uni-icons>
		</view>
	</view>
	<!-- 排序 -->
	<uni-popup ref="uwoOrderPopup" @change="popupChange" background-color="#fff" type="top">
		<view
			class="popup-content"
			:style="{
				paddingTop: top + 'px'
			}"
		>
			<uni-list>
				<uni-list-item v-for="(item, index) in orderOptions" :key="index" :clickable="true" @click="orderChange(item)">
					<!-- 自定义 body -->
					<template v-slot:body>
						<text class="" :class="item.checked ? 'text-primary' : ''">{{ item.label }}</text>
					</template>
				</uni-list-item>
			</uni-list>
		</view>
	</uni-popup>
	<!-- 筛选 -->
	<uni-popup ref="uwoFilterPopup" @change="popupChange" background-color="#fff" type="top">
		<view
			class="popup-content"
			style="padding-left: 12px; padding-right: 12px"
			:style="{
				paddingTop: top + 'px'
			}"
		>
			<view class="popup-content-item">
				<uni-section v-for="(group, index) in filterOptions" :key="index" class="uni-mb-5" :title="group.title">
					<uni-row :gutter="10">
						<uni-col :span="8" v-for="(item, idx) in group.items" :key="idx" class="uni-mb-5">
							<button class="cu-btn block" :class="[item.checked ? 'bg-primary' : 'lines-info']" @click="filterChange(group, item)">{{ substr(item.label) }}</button>
						</uni-col>
					</uni-row>
				</uni-section>
			</view>

			<view class="uwo-btn-group">
				<uni-row :gutter="10" class="uni-mb-10">
					<uni-col :span="12">
						<button class="cu-btn block bg-info" @click="cancelFilter">重置</button>
					</uni-col>
					<uni-col :span="12">
						<button class="cu-btn block bg-primary" @click="submitFilter">确定</button>
					</uni-col>
				</uni-row>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
/**
 * 列表搜索条组件
 * @property {Array} orderData  排序选项
 * @property {Array} filterData  筛选选项
 * @property {Number} top  距离顶部距离
 * @property {Number} bgColor  背景色
 * @example <uwo-search-bar :orderData="orderData" :filterData="filterData"></uwo-search-bar>
 */
import { computed, ref, watch } from 'vue';

/**
 * 判断字符串空
 * @param {String} str
 */
const isBlank = (str) => {
	if (str === undefined || str === null) {
		return true;
	}
	if (str == '' || str.length == 0) {
		return true;
	}
	if (typeof str === 'object') {
		try {
			str = JSON.stringify(str);
		} catch (e) {
			//TODO handle the exception
		}
	}
	if (str == 'undefined' || str == 'null' || str == '[]' || str == '{}') {
		return true;
	}
	return false;
};

const props = defineProps({
	orderData: {
		type: Array,
		default: () => {
			return [];
		}
	},
	filterData: {
		type: Array,
		default: () => {
			return [];
		}
	},
	top: {
		type: Number,
		default: 98
	},
	bgColor: {
		type: String,
		default: 'transparent'
	}
});

const activeColor = '#2979ff'; //激活选项颜色
const searchValue = ref(''); //搜索条绑定值
const uwoOrderPopup = ref(); //弹窗
const uwoFilterPopup = ref(); //弹窗
let popupState = ref(false); //弹窗显示状态
/**
 * 筛选弹窗状态改变
 */
const popupChange = (e) => {
	popupState.value = e.show;
};
/**
 * 排序选项
 */
const orderText = ref(''); //排序显示名称
const orderOptions = ref([]);
watch(
	() => props.orderData,
	() => {
		orderOptions.value = props.orderData.map((item, index) => {
			if (index === 0) {
				//默认按照第一个排序
				orderText.value = item.label;
			}
			return {
				...item,
				checked: index === 0
			};
		});
		// 默认按照第一个排序
	},
	{
		immediate: true
	}
);
//排序值
const orderValue = computed(() => {
	const orderItem = orderOptions.value.filter((item) => item.checked == true);
	if (orderItem.length > 0) {
		return {
			order: orderItem[0].value
		};
	}
	return null;
});
/**
 * 排序改变
 */
const orderChange = (item) => {
	if (!item.checked) {
		orderOptions.value.forEach((itm) => {
			itm.checked = false;
		});
		item.checked = true;
		orderText.value = item.label;
		search();
	}
	uwoOrderPopup.value.close();
};

/**
 * 筛选选项
 */
const filterOptions = ref([]);
const initFilter = () => {
	filterOptions.value = props.filterData.map((group) => {
		return {
			...group,
			items: [
				...group.items.map((item) => {
					return {
						...item,
						checked: false
					};
				})
			]
		};
	});
};
watch(
	() => props.filterData,
	() => {
		initFilter();
	},
	{
		immediate: true,
		deep: true
	}
);
/**
 * 筛选值
 */
const filterValue = computed(() => {
	const result = {};
	filterOptions.value.forEach((filter) => {
		const values = [];
		filter.items.forEach((item) => {
			if (item.checked) {
				values.push(item.value);
			}
		});
		if (values.length > 0) {
			result[filter.key] = values;
		}
	});
	return result;
});
/**
 * 字符串截取
 */
const substr = (s) => {
	if (s.length > 4) {
		return s.substring(0, 4) + '...';
	}
	return s;
};
/**
 * 打开排序
 */
const showOrder = () => {
	if (!popupState.value) {
		uwoOrderPopup.value.open();
	}
};
/**
 * 打开筛选
 */
const showFilter = () => {
	if (!popupState.value) {
		uwoFilterPopup.value.open();
	}
};
/**
 * 重置筛选
 */
const cancelFilter = () => {
	initFilter();
};
/**
 * 提交筛选
 */
const submitFilter = () => {
	uwoFilterPopup.value.close();
	search();
};
/**
 * 筛选点击
 */
const filterChange = (group, item) => {
	if (group.type === 'radio') {
		if (!item.checked) {
			//选中，则先全部取消选中
			group.items.forEach((v) => {
				v.checked = false;
			});
		}
	}
	item.checked = !item.checked;
};

/**
 * 提交参数
 */
const emits = defineEmits(['search']);
const search = () => {
	setTimeout(() => {
		emits('search', {
			...orderValue.value,
			...filterValue.value,
			searchValue: searchValue.value
		});
	}, 300);
};
</script>

<style lang="scss" scoped>
$bg-primary: #2979ff;
$bg-info: #8f939c;
.uwo-search-bar {
	position: fixed;
	top: --window-top; /* css变量 */
	left: 0;
	right: 0;
	z-index: 100;
	height: 88rpx;
	// background-color: #ffffff;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 15px;
	.uwo-search-bar-item {
		margin: 0 5px;
	}
}
.popup-content {
	position: relative;
	max-height: 100vh;
	.popup-content-item {
		overflow-y: auto;
		overflow-x: hidden;
		max-height: calc(100vh - 150px);
	}
}
.uwo-btn-group {
}
</style>
